<template>
  <Table
      ref="table"
      :size="size"
      :columns="finalColumn"
      :data="data"
      :stripe="true"
      :loading="loading"
      :max-height="tableHeight"
      :row-class-name="rowClassName"
      :highlight-row="true"
      :style="styleVar"
      class="table-wrapper"
      @on-row-click="(row,index)=>$emit('handleClick',row,index)"
      @on-row-dblclick="(row,index)=>$emit('handleDbClick',row,index)"
      @on-sort-change="(column,key,order)=>$emit('handleSortChange',column,key,order)"
      @on-select="(selection,row)=>$emit('handleSelect',selection,row)"
      @on-select-cancel="(selection,row)=>$emit('handleSelectCancel',selection,row)"
      @on-select-all="(selection)=>$emit('handleSelectAll',selection)"
      @on-select-all-cancel="(selection)=>$emit('handleClearSelect',selection)">
    <template v-if="col.slot!='additionalAction'&&col.slot!='action'"  v-for="col in finalColumn" :slot="col.slot" slot-scope="{ row,column,index }">
      <span v-if="!col.config||col.config.type==='span'" :style="col.config&&col.config.style?typeof(col.config.style)==='function'?col.config.style(row,column,index ):col.config.style:{}">
        {{col.config&&col.config.text?typeof(col.config.text)==='function'?col.config.text(row,column,index ):col.config.text:tools.lodash.get(row,col.key)}}
      </span>
      <field-cell v-else
        v-bind="{
          value:tools.lodash.get(row,col.key),
          config:{
            ...(col.config?col.config:{}),
            type:col.config&&col.config.type?typeof(col.config.type)==='function'?col.config.type(row,column,index ):col.config.type:''
          },
          ...(col.config&&col.config.attrs?typeof(col.config.attrs)==='function'?col.config.attrs(row,column,index ):col.config.attrs:{})
        }" 
        :style="col.config&&col.config.style?typeof(col.config.style)==='function'?col.config.style(row,column,index ):col.config.style:{}" 
        >
      </field-cell>
    </template>
    <template v-if="config.additionalAction" slot-scope="{ row,column,index }" slot="additionalAction">
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <template v-for="(item,i) in additionalAction.buttons">
          <a :style="{...{color:item.color},...(item&&item.style?typeof(item.style)==='function'?item.style(row,column,index,item,i ):item.style:{})}" 
            type="text" 
            @click="item.event(data[index],index)" 
            v-if="btnShowFun(row,item.key)">
            {{ item.title }}
          </a>
          <Divider v-if="i<additionalAction.buttons.length-1 && btnShowFun(row,item.key)" type="vertical"/>
        </template>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <DropdownMenu v-for="(item,i) in additionalAction.buttons" :key="item.key">
                <Button :style="{color:item.color}" type="text" @click="item.event(data[index],index)" v-if="btnShowFun(row,item.key)">{{ item.title }}</Button>
            </DropdownMenu>
        </template>
      </Dropdown>
    </template>
    <template v-if="config.action" slot-scope="{ row,column,index }" slot="action">
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <a type="text" @click="$emit('handleEdit',data[index],index)">{{ lang.edit }}</a>
        <Divider type="vertical"/>
        <a type="text" @click="$emit('handleDelete',data[index],index)">{{ lang.delete }}</a>
        <Divider type="vertical"/>
        <a type="text" @click="$emit('handleDetail',data[index],index)">{{ lang.detail }}</a>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <DropdownMenu>
                <DropdownItem>
                    <a type="text" @click="$emit('handleEdit',data[index],index)">{{ lang.edit }}</a>
                </DropdownItem>
                <DropdownItem>
                    <a type="text" @click="$emit('handleDelete',data[index],index)">{{ lang.delete }}</a>
                </DropdownItem>
                <DropdownItem>
                    <a type="text" @click="$emit('handleDetail',data[index],index)">{{ lang.detail }}</a>
                </DropdownItem>
            </DropdownMenu>
        </template>
      </Dropdown>
    </template>
  </Table>
</template>

<script>
import fieldCell from '../../basic/fieldCell'
export default {
  components: { fieldCell },
  name: "table-slot",
  data(){
    return {
      finalColumn:[],
      // tableHeight:window.innerHeight - 410
    }
  },
  props:{
    config:{
      default:()=>{
        return {
          height:null,
          action:true,
          additionalAction:true
        }
      }
    },
    tableHeight:{
      default:()=>{
        return window.innerHeight - 410
      }
    },
    loading:{
      default:()=>{
        return false
      }
    },
    data:{
      default:()=>{
        return []
      }
    },
    size:{
      default:()=>{
        return 'default'
      }
    },
    columns:{
      default:()=>{
        return []
      }
    },
    additionalAction:{
      default:()=>{
        return []
      }
    },
    btnShowFun:{
      default:()=>{
        return function(){
          return true
        }
      }
    },
    rowbgc:{
      default:()=>{
        return 'red'
      }
    }
  },
  computed:{
    lang(){
      return {
        "en-US": {
          edit:'edit',
          delete:'delete',
          detail:'detail',
          action:'action',
          more: 'more',
        },
        "zh-CN": {
          edit:'编辑',
          delete:'删除',
          detail:'查看',
          action:'操作',
          more: '更多',
        },
      }[this.G_Locale]
    },
    checkColumn(){
      return {
        type: 'selection',
        width: 60,
        align: 'center',
        field:'left',
        show: true,
      }
    },
    actionColumn(){
      let actionColumn = {
          key: 'action',
          title: this.lang.action,
          slot: 'action',
          width: 200,
          fixed: 'right',
          align: 'center',
          show: true
      }
      this.G_IsMobile && (actionColumn.width = 90)
      return actionColumn
    },
    styleVar() {
      return {
        '--bgc': this.rowbgc
      }
    }
  },
  mounted() {
    this.finalColumn=this.getFinalColumn();
    console.log(this.finalColumn)
  },
  watch:{
    'columns':{
      handler:function (){
        this.finalColumn=this.getFinalColumn();
      },
      deep:true
    },
    "config.checkColumnDisabled": {
      handler: function () {
        this.finalColumn = this.getFinalColumn();
      }
    },
  },
  methods:{
    getFinalColumn(){
      let columns = [];
      this.columns.map(item=>{
        if(item.show){
          item['slot']=item.key
          // delete item.key
          columns.push(item);
        }
        })
      let col=[...(this.config.checkColumnDisabled?[]:[this.checkColumn]),...columns];
      if(this.config.additionalAction){
        col.push(this.additionalAction)
      }
      if(this.config.action){
        col.push(this.actionColumn)
      };
      return col;
    },
    download(){
      this.G_Download(this.$refs.table,'The original data',this.columns.filter(item=>item.show===true),this.data)
    },
    export(){
      this.G_Export('The original data',this.columns.filter(item=>item.show===true),this.data)
    },
    /**
     * 解决列设置中显隐字段不好使
     */
    setFinalColumn(){
        this.finalColumn = this.getFinalColumn()
    },
    /**
     * 自定义背景样式
     */
    rowClassName(row, index) {
      if(row['needColor']) {
        return 'color-table-info-row'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ivu-table .color-table-info-row td{
    background-color: var(--bgc) !important;
    color: #fff;
    a {
      color: #fff;
    }
}
::v-deep .ivu-table .color-table-info-row.ivu-table-row-hover td{
    background-color: var(--bgc);
    color: #fff;
    a {
      color: #fff;
    }
}
.table-wrapper {
  // height: 100%;
  overflow: hidden !important;
}
</style>